import { Button, Checkbox, Divider, Select, Table, Tag, Input, InputNumber } from "antd";
import { observer } from "mobx-react-lite";
import React, { FC } from "react";
import TableInfoStore, { ColDataProps } from '../tableInfoStore'
import { DeleteOutlined } from "@ant-design/icons";
const { Option } = Select;

const FieldList: FC = () => {
    const {

        fieldInfoList,
        setFieldInfoList,
        editableKeys,
        addRow,
        deleteItem,
        canEditFieldInfo
    } = TableInfoStore;

    const dataTypes = [
        { value: 'varchar', label: 'varchar' },
        { value: 'datetime', label: 'datetime' },
        { value: 'int', label: 'int' },
        { value: 'bigint', label: 'bigint' },
        { value: 'tinyint', label: 'tinyint' },
        { value: 'text', label: 'text' },
        { value: 'dec', label: 'dec' },
        { value: 'time', label: 'time' },
        { value: 'date', label: 'date' },
        { value: 'longtext', label: 'longtext' },
    ];

    const queryTypes = [
        { value: 'EQ', label: '=' },
        { value: 'NE', label: '!=' },
        { value: 'GT', label: '>' },
        { value: 'GTE', label: '>=' },
        { value: 'LT', label: '<' },
        { value: 'LTE', label: '<=' },
        { value: 'LIKE', label: 'LIKE' },
        { value: 'BETWEEN', label: 'BETWEEN' },
    ];

    const htmlTypes = [
        { value: 'input', label: '文本框' },
        { value: 'textarea', label: '文本域' },
        { value: 'select', label: '下拉框' },
        { value: 'radio', label: '单选框' },
        { value: 'checkbox', label: '复选框' },
        { value: 'datetime', label: '日期控件' },
        { value: 'imageUpload', label: '图片上传' },
        { value: 'fileUpload', label: '文件上传' },
        { value: 'editor', label: '富文本控件' },
    ];

    const columns = [
        {
            title: '操作',
            key: 'action',
            width: 90,
            render: (_, record, index) => (
                <>

                    <Button
                        type="link"
                        danger
                        size="small"
                        onClick={() => deleteItem(index)}
                        icon={<DeleteOutlined />}
                    />
                    <Divider type="vertical" />
                    <span
                        className="e_icon"
                        onClick={() => canEditFieldInfo(record.id!)}
                        style={{ cursor: 'pointer', color: '#1890ff' }}
                    >
                        编辑
                    </span>
                </>
            ),
        },
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            width: 120,
        },
        {
            title: '字段代码',
            dataIndex: 'code',
            key: 'code',
            width: 130,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Input
                        value={text}
                        onChange={(e) => handleFieldChange(index, 'code', e.target.value)}
                    />
                ) : (
                    text
                )
            ),
        },
        {
            title: '字段名称',
            dataIndex: 'name',
            key: 'name',
            width: 150,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Input
                        value={text}
                        onChange={(e) => handleFieldChange(index, 'name', e.target.value)}
                    />
                ) : (
                    text
                )
            ),
        },
        {
            title: '数据类型',
            dataIndex: 'dataType',
            key: 'dataType',
            width: 120,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Select
                        value={text}
                        style={{ width: '100%' }}
                        onChange={(value) => handleFieldChange(index, 'dataType', value)}
                    >
                        {dataTypes.map(item => (
                            <Option key={item.value} value={item.value}>
                                {item.label}
                            </Option>
                        ))}
                    </Select>
                ) : (
                    text
                )
            ),
        },
        {
            title: '数据长度',
            dataIndex: 'dataTypeLength',
            key: 'dataTypeLength',
            width: 100,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <InputNumber
                        value={text}
                        style={{ width: '100%' }}
                        onChange={(value) => handleFieldChange(index, 'dataTypeLength', value)}
                    />
                ) : (
                    text
                )
            ),
        },
        {
            title: '主键',
            dataIndex: 'isKey',
            key: 'isKey',
            width: 60,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Checkbox
                        checked={text === 1}
                        onChange={(e) => handleFieldChange(index, 'isKey', e.target.checked ? 1 : 0)}
                    />
                ) : (
                    text === 1 ? <Tag color="#108ee9">是</Tag> : null
                )
            ),
        },
        {
            title: '外键表',
            dataIndex: 'featureName',
            key: 'featureName',
            width: 150,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Input
                        value={text}
                        onChange={(e) => handleFieldChange(index, 'featureName', e.target.value)}
                    />
                ) : (
                    text
                )
            ),
        },
        {
            title: '系统常量',
            dataIndex: 'comboBox',
            key: 'comboBox',
            width: 150,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Input
                        value={text}
                        onChange={(e) => handleFieldChange(index, 'comboBox', e.target.value)}
                    />
                ) : (
                    text
                )
            ),
        },


        // ... (similar implementations for other checkbox columns)
        {
            title: '可为空',
            dataIndex: 'isNull',
            key: 'isNull',
            width: 60,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Checkbox
                        checked={text === 1}
                        onChange={(e) => handleFieldChange(index, 'isNull', e.target.checked ? 1 : 0)}
                    />
                ) : (
                    text === 1 ? <Tag color="#108ee9">是</Tag> : null
                )
            ),
        },
        {
            title: '默认值',
            dataIndex: 'defaultValue',
            key: 'defaultValue',
            width: 150,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Input
                        value={text}
                        onChange={(e) => handleFieldChange(index, 'defaultValue', e.target.value)}
                    />
                ) : (
                    text
                )
            ),
        },
        {
            title: '插入',
            dataIndex: 'isInsert',
            key: 'isInsert',
            width: 60,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Checkbox
                        checked={text === 1}
                        onChange={(e) => handleFieldChange(index, 'isInsert', e.target.checked ? 1 : 0)}
                    />
                ) : (
                    text === 1 ? <Tag color="#108ee9">是</Tag> : null
                )
            ),
        },

        {
            title: '编辑',
            dataIndex: 'isEdit',
            key: 'isEdit',
            width: 60,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Checkbox
                        checked={text === 1}
                        onChange={(e) => handleFieldChange(index, 'isEdit', e.target.checked ? 1 : 0)}
                    />
                ) : (
                    text === 1 ? <Tag color="#108ee9">是</Tag> : null
                )
            ),
        },
        {
            title: '列表',
            dataIndex: 'isList',
            key: 'isList',
            width: 60,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Checkbox
                        checked={text === 1}
                        onChange={(e) => handleFieldChange(index, 'isList', e.target.checked ? 1 : 0)}
                    />
                ) : (
                    text === 1 ? <Tag color="#108ee9">是</Tag> : null
                )
            ),
        },


        {
            title: '查询',
            dataIndex: 'isQuery',
            key: 'isQuery',
            width: 60,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Checkbox
                        checked={text === 1}
                        onChange={(e) => handleFieldChange(index, 'isQuery', e.target.checked ? 1 : 0)}
                    />
                ) : (
                    text === 1 ? <Tag color="#108ee9">是</Tag> : null
                )
            ),
        },



        {
            title: '查询方式',
            dataIndex: 'queryType',
            key: 'queryType',
            width: 80,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Select
                        value={text}
                        style={{ width: '100%' }}
                        onChange={(value) => handleFieldChange(index, 'queryType', value)}
                    >
                        {queryTypes.map(item => (
                            <Option key={item.value} value={item.value}>
                                {item.label}
                            </Option>
                        ))}
                    </Select>
                ) : (
                    queryTypes.find(q => q.value === text)?.label || text
                )
            ),
        },
        {
            title: '必填',
            dataIndex: 'isRequired',
            key: 'isRequired',
            width: 60,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Checkbox
                        checked={text === 1}
                        onChange={(e) => handleFieldChange(index, 'isRequired', e.target.checked ? 1 : 0)}
                    />
                ) : (
                    text === 1 ? <Tag color="#108ee9">是</Tag> : null
                )
            ),
        },

        {
            title: '显示类型',
            dataIndex: 'htmlType',
            key: 'htmlType',
            width: 110,
            render: (text, record, index) => (
                editableKeys.includes(record.id!) ? (
                    <Select
                        value={text}
                        style={{ width: '100%' }}
                        onChange={(value) => handleFieldChange(index, 'htmlType', value)}
                    >
                        {htmlTypes.map(item => (
                            <Option key={item.value} value={item.value}>
                                {item.label}
                            </Option>
                        ))}
                    </Select>
                ) : (
                    htmlTypes.find(h => h.value === text)?.label || text
                )
            ),
        },
    ];

    const handleFieldChange = (index: number, field: keyof ColDataProps, value: any) => {
        const newList = [...fieldInfoList];
        newList[index] = { ...newList[index], [field]: value };
        setFieldInfoList(newList);
    };
    console.log("这是field组件")
    const scrollX= columns.reduce((cur,next)=>{
        return cur + next.width
    },0)
    return (
        <>
            <Table
                rowKey="id"
                columns={columns}
                dataSource={fieldInfoList}
                pagination={false}
                size="small"
                bordered
                scroll={{ x: scrollX }}
            />
            <Button
                style={{ marginTop: 16, width: '100%' }}
                type="dashed"
                onClick={addRow}
            >
                + 增加一行数据
            </Button>
        </>
    );
};

export default observer(FieldList);